<template>
  <div class="seamless-scroll-container">
    <vue3-seamless-scroll :list="dataList" :hover="true" :step="0.3" :limitScrollNum="5" :wheel="true"
      class="scroll-wrap">
      <div v-for="(item, index) in dataList" :key="index" class="scroll-item">
        <div class="content-wrapper">
          {{ item }}
        </div>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { ref } from 'vue'

const dataList = ref([
  '为什么鲜奶和蔬菜农场总是紧贴城市，而小麦田却在更远的地方？',
  '为什么林业（木材）是第二圈而非第一圈？',
  '如果马车速度提高一倍，杜能环会变宽还是变窄？',
  '若突然发明了罐头技术，哪个环带的变化会最明显？',
  '为什么现代牛奶场可以建在远离城市的地方，而1826年不行？',
  '有机农场宁愿支付更高地租也要靠近城市，这违背了杜能理论吗？',
  '为什么香槟产区宁愿承担高额运费也要坚持在原产地种植葡萄？',
  '沙漠中的以色列农业为何能突破杜能环限制？',
])
</script>

<style scoped>
.seamless-scroll-container {
  width: 100%;
  height: 27rem; /* 增加高度以利用空间 */
  overflow: hidden;
  box-sizing: border-box;

}

.scroll-wrap {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.scroll-item {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.content-wrapper {
  width: 90%;
  padding: 10px 0;
  background-color: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 500;
  color: #e2e8f0; /* 浅色文字 */
  transition: all 0.3s;
}

.scroll-item:hover .content-wrapper {
  background-color: rgba(255, 255, 255, 0.15); /* 悬停时稍微加深 */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
</style>